<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-04-30 16:18:31
 * @LastEditTime: 2021-05-08 18:42:50
-->
<template>
  <div class="models">
    <a class="modelItem"
       v-for="(modelItem, ModelIndex) in models"
       :key="ModelIndex"
       @click="selectedModel(ModelIndex)">
      {{modelItem}}
    </a>
    <a-modal v-model:visible="isShowModal"
             :title="$t('lang.attributesDrawer.newModelTitle')"
             style="top: 0px"
             :okText="$t('lang.attributesDrawer.okText')"
             :cancelText="$t('lang.attributesDrawer.cancelText')"
             @ok="handleOk">
      <SettingAttributes :selectedModelIndex="selectedModelIndex"
                         ref="settingAttributes" />
    </a-modal>
  </div>
</template>

<script>
import SettingAttributes from './SettingAttributes'
import { reactive, toRefs, ref, getCurrentInstance } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
export default {
  components: {
    SettingAttributes
  },
  setup () {
    const { t } = useI18n()
    const { proxy } = getCurrentInstance()
    const store = useStore()

    const data = reactive({
      models: [
        t('lang.models.Circle'),
        t('lang.models.Ring'),
        t('lang.models.Plane'),
        t('lang.models.Box'),
        t('lang.models.Sphere'),
        t('lang.models.Cylinder'),
        t('lang.models.Cone'),
        t('lang.models.Torus'),
        t('lang.models.TorusKnot')
      ]
    })
    const isShowModal = ref(false)
    const selectedModelIndex = ref(null)
    const selectedModel = (modelIndex) => {
      isShowModal.value = true
      selectedModelIndex.value = modelIndex
      store.commit('modelData/updateModelIndex', modelIndex)
    }
    const settingAttributes = ref()
    const handleOk = () => {
      settingAttributes.value.saveData()
      proxy.$emit('createMode')
      isShowModal.value = false
    }

    return {
      ...toRefs(data),
      selectedModel,
      isShowModal,
      selectedModelIndex,
      handleOk,
      settingAttributes
    }
  }
}
</script>

<style lang='less' scoped>
.models {
  width: 100%;
  background-color: inheritz;
  .modelItem {
    width: 100%;
    cursor: pointer;
    display: block;
    color: black;
    text-align: center;
    padding: 0 60px 0 0;
    &:hover {
      background-color: @activeColor;
      color: @fontColor;
    }
  }
}
</style>
